<template>
  <ul class="collapse" :class="{active:className}">
    <li v-for="(item,index) in dataList" :key="index">
      <div class="collapseName">
        <div @click="changeItem(index)">
          <van-icon :name="item.isOpen?'arrow-down':'arrow-up'" />
          <span style="margin-left: 20rpx">{{item.name}}</span>
        </div>
        <p>
          <van-icon name="more-o" size="20" @click="getMore(item,index)"/>
          <van-action-sheet
            :show="item.isShow"
            :actions="actions"
            :description="description"
            @select="onSelect"
            @close="onClose(index)"
          />
        </p>
      </div>
      <template v-if="item.children">
<!--        <collapseBox3 :data="item.children" :className="item.isOpen"></collapseBox3>-->
      </template>


    </li>
  </ul>
</template>

<script>
  // import collapseBox3 from "./collapseBox3"
  export default {
    name: 'collapseBox',
    props: ['data','className'],
    data () {
      return {
        iconName: 'arrow-up',
        dataList:[],
        description:"",
        actions:[
          { name: '编辑', color: '#07c160' },
          { name: '添加', color: '#1989fa' },
          { name: '删除', color: '#ee0a24' },
          { name: '详情', color: '#1989fa' },
        ],
      }
    },
    onLoad(){
      this.dataList=this.data;
    },
    onShow(){

    },
    components:{
      // collapseBox3
    },
    methods: {
      onSelect(val){
        if(val.target.name=='详情'){
          wx.navigateTo({ url: '/pages/createProductDetail/main' })
        }
      },
      onClose(index){
        this.dataList[index].isShow=false;
      },
      getMore(item,index){
        this.description="所选类型"+item.name
        this.dataList[index].isShow=true;
        // this.show=true;
      },
      changeItem (index) {
        if (this.dataList[index].isOpen) {

          this.dataList[index].isOpen=false;
          // this.$set(this.dataList,this.dataList[index].isOpen,false)
        } else  {

          this.dataList[index].isOpen=true;
          // this.$set(this.dataList,this.dataList[index].isOpen,true)
        }

        //console.log(this.data[index].isOpen)
      }
    }
  }
</script>

<style scoped>
  .collapse{
    width: 100%;
    height: 0;
    background: #fff;
    font-size:32rpx;
    list-style-type: none;
    transition: all 0.2s;
    overflow: hidden;
  }
  .collapse.active{
    height: auto;
    transition: all 0.2s;

  }

  .collapse>li{
    width: 100%;
    padding:25rpx 0 0 50rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;

  }
  .collapse>li:last-child{
    border-bottom:none

  }
  .collapseName>p{
    width:70%;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-right: 5%;
  }
  .collapseName>div{
    width: 30%;
  }
  .collapseName{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>
